<script setup lang="ts">
import { onMounted, ref } from 'vue'

import PersonCard from './DachuangProjectDetailsTeamPersonCard2.vue';
import type { ProjectTeamProps } from '../types/ProjectTeamProps';
import { getIcon } from "@/api/assets/assets";

// Define props
const props = defineProps<{ card: ProjectTeamProps, }>();
const defaultAvatar = ref<string>("")
const defaultImg = ref<string>("")

const fetchIcon = async () => {
  try {
    const data = await getIcon(['333.png', '164.png'])
    defaultAvatar.value = data['333.png']
    defaultImg.value = data['164.png']
  }
  catch (error) {
    console.error('API 调用错误:', error)
  }
}
onMounted(() => {
  fetchIcon()
})
const { teachers, members } = props.card;
const aaaa = defaultAvatar
const bbbb = defaultImg
</script>

<template>
  <h2 style="font-size: 2rem; font-weight: bold; text-align: center;">
    指导老师
  </h2>

  <div v-for="(teacher, index) in teachers" :key="index" style="display: flex; justify-content: center; margin: 0.5rem;">
    <PersonCard
      :avatar="aaaa"
      :name="teacher.userName"
      :role="teacher.userType"
      :department="teacher.userCollege"
      :img="bbbb"
    />
  </div>

  <h2 style="font-size: 2rem; font-weight: bold; text-align: center;">
    核心成员
  </h2>

  <div v-for="(teacher, index) in members" :key="index" style="display: flex; justify-content: center; margin: 0.5rem;">
    <PersonCard
      :avatar="aaaa"
      :name="teacher.userName"
      :role="teacher.userType"
      :department="teacher.userCollege"
      :img="bbbb"
    />
  </div>
</template>

<style lang="scss">
</style>
